<template>
  <div class="trace-detail-container">
    <h3 class="trace-title">{{ title }}</h3>
    <div class="trace-detail-content">
      <GoodDetail :good="goodDetail[0]" :block_pro="block_pro" />

      <!-- 根据用户角色展示不同的溯源信息 -->
      <el-divider v-if="goodDetail[1] && (user === 2 || user === 3)"></el-divider>
      <div v-if="goodDetail[1] && (user === 2 || user === 3)" class="trace-timeline-container">
        <h4>商品供应商信息</h4>
        <div class="trace-timeline trace-content">
          <el-timeline v-if="goodDetail[1]">
            <!-- 供应商信息 -->
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>供应商地址</span>
                <span>{{ goodDetail[1].to_address }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>入库时间</span>
                <span>{{ dateTime(goodDetail[1].timestamp) }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>质检情况</span>
                <span>{{ qualityLabel(goodDetail[1].quality) }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>发货单位</span>
                <span>{{ goodDetail[1].from }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>收货单位</span>
                <span>{{ goodDetail[1].to }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>收货地址</span>
                <span>{{ goodDetail[1].location }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>blockHash</span>
                <span>{{ block_pro.blockHash }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>blockNumber</span>
                <span>{{ block_pro.blockNumber }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>transactionHash</span>
                <span>{{ block_pro.transactionHash }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>timestamp</span>
                <span>{{ goodDetail[1].timestamp }}</span>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>

      <!-- 只有消费者角色才显示零售商信息 -->
      <el-divider v-if="goodDetail[2] && user === 3"></el-divider>
      <div v-if="goodDetail[2] && user === 3" class="trace-timeline-container">
        <h4>商品零售商信息</h4>
        <div class="trace-timeline trace-content">
          <el-timeline v-if="goodDetail[2]">
            <!-- 消费者信息 -->
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>零售商地址</span>
                <span>{{ goodDetail[2].to_address }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>入库时间</span>
                <span>{{ dateTime(goodDetail[2].timestamp) }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>质检情况</span>
                <span>{{ qualityLabel(goodDetail[2].quality) }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>发货单位</span>
                <span>{{ goodDetail[2].from }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>收货单位</span>
                <span>{{ goodDetail[2].to }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>收货地址</span>
                <span>{{ goodDetail[2].location }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>blockHash</span>
                <span>{{ block_ret.blockHash }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>blockNumber</span>
                <span>{{ block_ret.blockNumber }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>transactionHash</span>
                <span>{{ block_ret.transactionHash }}</span>
              </div>
            </el-timeline-item>
            <el-timeline-item class="trace-item">
              <div class="trace-item-content">
                <span>timestamp</span>
                <span>{{ goodDetail[2].timestamp }}</span>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GoodDetail from './GoodDetail.vue'

export default {
  components: {
    GoodDetail
  },
  props: ['goodDetail', 'user', 'block_pro', 'block_dis', 'block_ret'],
  methods: {
    dateTime(val) {
      return this.$dateTime(val)
    },
    qualityLabel(quality) {
      return quality === 0 ? '优质' : (quality === 1 ? '合格' : '不合格')
    }
  },
  computed: {
    title() {
      if (this.user === 1) {
        return `生产地商品溯源信息`
      } else {
        return `以下是溯源码为${this.goodDetail[0].traceNumber}的溯源信息`
      }
    }
  }
}
</script>

<style scoped>
.trace-detail-container {

  margin: 0 10%;
}

.trace-title {
  color: #024821;
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.trace-detail-content {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.trace-timeline-container {
  margin-top: 20px;
}

.trace-timeline {
  padding-left: 0;
}

.trace-item {
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.trace-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trace-item-content > span:nth-child(1) {
  color: #999;
}

.trace-item-content > span:nth-child(2) {
  color: #333;
  font-weight: bold;
}

.el-divider {
  margin: 20px 0;
}
</style>
